<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dependency Graph</title>
    <script type="text/javascript" src="js/raphael-min.js"></script>
    <script type="text/javascript" src="js/graffle.js"></script>
    <script type="text/javascript" src="js/graph.js"></script>
    <script type="text/javascript" src="js/dracula.min.js"></script>
    <script type="text/javascript" src="relationships.js"></script>
    <script type="text/javascript">
        var redraw;
        var height = 600;
        var width = 900;
        /* only do all this when document has finished loading (needed for RaphaelJS */
        window.onload = function() {
            var g = new Graph();
            var json = JSON.parse(relationships);
            for(var i in json) {
                g.addEdge(json[i].target, json[i].source, { directed : true });
            }
            /* layout the graph using the Spring layout implementation */
            var layouter = new Graph.Layout.Spring(g);
            layouter.layout();
            /* draw the graph using the RaphaelJS draw implementation */
            var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
            renderer.draw();
            redraw = function() {
                layouter.layout();
                renderer.draw();
            };
        };
    </script>
<body>
<div id="canvas"></div>
<button id="redraw" onclick="redraw();">redraw</button>
</body>
</html>